<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿真策略查询</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <!-- 引入 Vue -->
    <script src="//unpkg.com/vue@next"></script>
    <!-- 引入组件库 -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- 引入 axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div class="box">
        <el-form inline="true" background-color="#B5B5B5">
            <el-form-item label="请输入方案名称: ">
                <el-input v-model="taskName" placeholder="请输入方案名称 支持模糊查询" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe max-height="600">
            <el-table-column v-for=" item in columnList " :prop="item.prop" :label="item.label"></el-table-column>
        </el-table>
        <el-pagination
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[5, 20, 30, 50]"
                :pager-count="5"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                background
                layout="total,sizes, prev, pager, next">
        </el-pagination>
    </div>
</div>
<script>
      const App = {
        data() {
          return {
            total: 0,
            currentPage: 1,
            pageSize:5,
            taskName: '',
            pageNum: '1',
            loading: false,
            tableData: '',
            columnList:[
                {prop:"taskName",label:"方案名称"},
                {prop:"replenishScene",label:"场景"},
                {prop:"perfectBranch",label:"完美分支"},
                {prop:"wuLingBranch",label:"五菱分支"},
                {prop:"useUpload",label:"线下poc"},
                {prop:"useBod",label:"线下poc-bod"},
                {prop:"inOutRule",label:"进销存策略"},
                {prop:"fulfillRule",label:"履约策略"},
                {prop:"boFulfillRule",label:"BO履约策略"},
                {prop:"fulfillSource",label:"履约数据来源"},
                {prop:"sourceFindingRule",label:"寻源策略"},
                {prop:"fillForZeroInv",label:"期初库存策略"},
                {prop:"forecastRoll",label:"预测日滚动"},
                {prop:"goodsClassify",label:"商品分类管理"},
                {prop:"replenishTrigger",label:"补货点策略"},
                {prop:"replenishCalRule",label:"补货量策略"},
                {prop:"safetyStockCalRule",label:"安全库存策略"},
                {prop:"useCartonSpecFix",label:"箱规修正"},
                {prop:"boReplenish",label:"bo补调单下单时间"},
                {prop:"tradeLayout",label:"商品布局"},
                {prop:"inventoryShuffle",label:"期初库存洗牌"},
                {prop:"useUpFlowPoFix",label:"上游库存修正"},
                {prop:"useMinOrderQty",label:"最小起订量修正"}
            ]
          }
        },
        methods: {
          onSubmit() {
            this.loading = true
            axios({
                method: 'post',
                url: '/api/project/getStrategyOptions',
                data: {'pageNum': this.currentPage, 'pageSize': this.pageSize, 'taskName': this.taskName}
            }).then(response => {
                this.loading = false
                if (response.status === 200) {
                    this.tableData = response.data.data.list
                    this.total = response.data.data.total
                }else {
                }
            }).catch(()=>{
            })
          },
          handleCurrentChange(val){
            this.currentPage = val;
            this.onSubmit();
          },
          handleSizeChange(val){
            this.pageSize = val;
          }
        }
      }
      const app = Vue.createApp(App);
      app.use(ElementPlus)
      app.mount("#app");


</script>
<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      padding:100px 30px;
      overflow: hidden;
      box-sizing: border-box;
    }

    .el-input {
      width: 300px;
    }


</style>
</body>
</html>
